<template>
  <div class="header-contaienr">
    <span class="logo">
      <el-image src="/logo.png"></el-image>
    </span>
    <span class="user">

      <el-dropdown
        trigger="click"
        @command="handleCommand"
      >
        <el-badge value="机构负责人">
          <el-avatar src="/avatar.png"></el-avatar>
        </el-badge>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="update-password">修改密码</el-dropdown-item>
            <el-dropdown-item command="exit">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </span>
  </div>

</template>

<script setup>
import { useUserStore } from '@/store/user';
import { useRouter } from 'vue-router';
const userStore = useUserStore();
const router = useRouter();

const handleCommand = (command) => {
  if (command == 'update-password') {
    update_password_modal.value.show = true;
  } else if (command == 'exit') {
    userStore.handleExit();
    router.push({
      path: "/auth/login"
    })
  }
}
</script>

<style lang="scss" scoped>
.header-contaienr {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // background-image: -webkit-linear-gradient(0deg, #5d5df9 0, #312366 100%);
  padding: 0 20px;
  box-sizing: border-box;

  .logo {
    height: 30px;

    .el-image {
      height: 100%;
    }
  }

  .user {
    width: 240px;
  }
}
</style>